<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/icons/font/bootstrap-icons.min.css">
  <style>
      /*顶栏大小及内部设置*/
    .header{
        height:150px;
        background-color: #2c416f;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        color: white;
        text-align: center;
    }
      body{
          background-color: #cacaca;
      }
    /*首页logo和工作室名合并框CSS设置*/
    .header-left{
        display:flex;
        align-items: center;
    }
    /*logo CSS设置*/
    .header img{
        height:120px;
        margin-right: 10px;
    }
    /*工作室名CSS设置*/
    .hp{
        font-size: 60px;
        color: white;
        text-decoration: none;
    }
    /*个人中心字样CSS设置*/
    .ps{
        font-size: 20px;
        color: white;
        text-decoration: none;

    }
    /*个人中心图标css设置*/
    .pm{
        height:20px;
        color: white;
        margin-right: 2px;
        font-size: 20px;
        text-decoration: none;
    }
    /*导航栏CSS设置*/
    nav {
        background-color: #153173;
        overflow: hidden;
    }
    /*导航栏副框设置*/
    nav ul {
        display: flex;
        justify-content: space-around;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    /*导航栏子框设置*/
    nav li {
        float: left;
    }
    /*导航栏各板块导航CSS设置*/
    nav li a {
        font-size: 20px;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-weight: normal;
        transition: font-weight 0.3s ease;
    }
    /*导航栏子块鼠标悬停CSS设置*/
    nav li a:hover {
        color:black;
        font-weight:normal;
        background-color: white;
       /* border-bottom: 2px solid red;*/
        animation: jump 1s infinite alternate; /* 持续时间1秒，无限循环，交替方向 */
    }
    @keyframes jump {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); } /* 向下跳动5px */
    }
    /*底栏CSS设置*/
    .footer{
        display: flex;
        background-color: #274271;
        width: 100%;
        height: 313px;
        margin-top: 100%;
    }
    /*底栏左半部分CSS设置*/
    .left-bottom{
        display: flex;
        margin: 50px auto;
    }
    /*底栏右半部分CSS设置*/
    .right-bottom{
        display: flex;
        color: white;
        font-size: 25px;
        margin: 40px auto;
    }
    /*底栏右半部分子块CSS设置*/
    .right-bottom ul li{
        padding: 10px;
    }
  </style>
</head>
<body>
<div class = "header d-flex justify-content-between">
    <div class = "header-left d-flex align-content-center">
        <a href="/"><img src="static/img/logo.png" alt="logo"></a>
        <a href = "/" class = "hp">510-梦想工作室</a>
    </div>
    <div class = "header-right d-flex align-content-center">
        <a href = "/personal" class = "pm"><i class=" bi-person-circle"></i></a>
        <a href = "/personal" class = "ps">个人中心</a>
    </div>
</div>
<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">荣誉展示</a></li>
        <li><a href="#people">工作室人员</a></li>
        <li><a href="#model">大模型</a></li>
        <li><a href="#share">资源共享</a></li>
        <li><a href="#joinus">加入我们</a></li>
        <li><a href="#aboutus">关于我们</a></li>
        <li><a href="#feedback">意见反馈</a></li>
    </ul>
</nav>
<div class="footer">
    <div class="left-bottom">
        <img src="../html/static/img/logo.png" style="width: 220px;height: 220px;">
        <div style="color: white;font-size: 70px; margin: 55px 80px">510-梦想工作室</div>
    </div>
    <div class="right-bottom">
        <ul>
            <li>联系方式：</li>
            <li>地址：中国矿业大学徐海学院主楼-608</li>
            <li>版权所有：©中国矿业大学徐海学院510梦想工作室</li>
            <li>XXXXXXXXX</li>
        </ul>
    </div>
</div>
</body>
</html>